<!-- 组态报警显示窗口 -->
<template>
  <div>
      <el-dialog   :modelValue="dialogVisible"  title="组态报警窗口"  width="70%"
                  :close-on-click-modal="false" :close-on-press-escape="false"
                  :show-close="false" >

                  <el-table ref="reftable" :data="alarmdat" style="width: 100%" :row-class-name="tableRowClassName" 
                    header-cell-class-name="headcls"
                    :highlight-current-row="false"
                  >
                    <el-table-column prop="projectname" label="来源" />
                    <el-table-column prop="dt" label="时间" />
                    <el-table-column prop="station" label="站点" />
                    <el-table-column prop="descr" label="描述" />
                    <el-table-column prop="alarmtypedescr" label="报警类型" />
                </el-table>

        <template #footer>
          <div style="display: flex; flex-direction: row-reverse; ">


            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleOk"  style="margin: 0 10px 0 10px;" >确定</el-button>

            <el-button @click="scrollToBottom">滚动底部</el-button>
            <el-button @click="scrollToTop">滚动顶部</el-button>
            <!-- <el-button @click="addAlarm3">增加一般信息</el-button>            
            <el-button @click="addAlarm2">增加事故信息</el-button>            
            <el-button @click="addAlarm1">增加报警信息</el-button> -->
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>

import {ElMessage} from "element-plus";
import { mapState } from 'vuex'

export default {
  name: "DlgAlarmDisplay",
  props:{ dialogVisible: Boolean },
  components:{},
  emits:[ "resAlarmDisplay" ],

  mounted() {

  },
  computed:{
    // ...mapState('hg3000alarm', ['alarmdat'])
    // ...mapState('hg3000alarm', {
    //   alarmdat: state => state.alarmdat
    // })

    alarmdat() {
      return this.$store.state.hg3000alarm.alarmdat;
    },
  },
  data(){
    return{
      item : { value: 0, picpath: "images/1G_stop.svg" },
      // alarmdat : [ { alarmtype: 1,  dt: '2024-09-21 00:00:00', station: "1#机组", descr: "1#机组开启", alarmtypedescr: "报警类型" } ]
    }
  },
  watch: {

  },
  methods:{
    tableRowClassName( {row, rowIndex} ){
      // console.log( "rowIndex", rowIndex, row,   row.alarmtype   )
      if (row.alarmtype === 0) {
        return 'info-row'
      } else if (row.alarmtype === 1) {
        return 'warning-row'
      } else if (row.alarmtype === 2) {
        return 'error-row'
      }
      return ''      
    },

    addAlarm1( ){
      this.addAlarm( 1,'2024-09-21 00:00:00', "1#机组", "1#机组开启", "报警类型"   )
    },

    addAlarm2( ){
      this.addAlarm( 2,'2024-09-21 00:00:00', "1#机组", "1#机组开启", "报警类型"   )
    },

    addAlarm3( ){
      this.addAlarm( 0,'2024-09-21 00:00:00', "1#机组", "1#机组开启", "报警类型"   )
    },    

    addAlarm(  alarmtype,  dt, station, descr, alarmtypedescr  ){
      var v = { alarmtype:alarmtype,  dt:dt, station:station, descr:descr, alarmtypedescr:alarmtypedescr }
      this.$store.commit('addAlarm', v );   // addAlarm 在 hg3000alarm 模块中
    },

    handleOk(  ){
      this.$emit( "resAlarmDisplay", 1 )
    },

    handleCancel(){
      this.$emit( "resAlarmDisplay", 0 )
    },

    scrollToBottom(  ){
      this.$nextTick(() => {
        const tableRef = this.$refs.reftable;
        if (tableRef && tableRef.$el) {
          const tableContainer = this.$refs.reftable.$el.querySelector(".el-table__body-wrapper");
          if (tableContainer) {
            const rows = tableContainer.querySelectorAll("table > tbody > tr");
            if (rows.length > 0) {
              const lastRow = rows[rows.length - 1];
              lastRow.scrollIntoView({behavior: "smooth"});
            }
          }
        }
      }) // end of nextTick
    },

    scrollToTop(  ){
      this.$nextTick(() => {
        const tableRef = this.$refs.reftable;
        if (tableRef && tableRef.$el) {
          const tableContainer = this.$refs.reftable.$el.querySelector(".el-table__body-wrapper");
          if (tableContainer) {
            const rows = tableContainer.querySelectorAll("table > tbody > tr");
            if (rows.length > 0) {
              const lastRow = rows[0];
              lastRow.scrollIntoView({behavior: "smooth"});
            }
          }
        }
      }) // end of nextTick
    },    

  },  // end of methods

}

</script>

<style  lang="less" scoped >

    ::v-deep(.el-dialog){
      .el-dialog__body {
          height: 50vh; overflow: auto; padding: 0px;
      }

      // .el-dialog__header{
      //   margin: 0;
      //   background-color: black;
      //   font-size: 16px;
      // }

      // .el-dialog__footer {
      //   background-color: @dialog_footer_color;
      // }
    }

// ::v-deep( tbody tr:hover > td ){
//   background-color: transparent !important;
// }

    ::v-deep(.el-table .warning-row) {
      --el-table-tr-bg-color: yellow;
      font-size: 16px;
      font-weight: bold;
    }
    ::v-deep(.el-table .error-row) {
      // --el-table-tr-bg-color: red;
      background-color: rgb(254, 0, 0);
      font-size: 16px;
      font-weight: bold;
      color:  blue;
    }
    ::v-deep(.el-table .info-row) {
      --el-table-tr-bg-color: white;
      font-size: 16px;
      font-weight: bold;      
    }
    ::v-deep(.el-table .headcls) {
      --el-table-tr-bg-color: white;
      font-size: 16px;
      font-weight: bold;      
    }


    //悬停的行为透明色
    .el-table {
      ::v-deep( tbody tr:hover > td ) {
        background-color: transparent !important;
    }

}

</style>